iT邦幫忙

2026 iThome 鐵人賽

DAY 6
0

在完成遊戲選單與遊玩畫面後,今天我們要來開發 App 中不可或缺的設定頁面(Settings View)。一個結構清晰的設定頁面,不僅能提升使用者體驗,也能為後續的系統擴充打下良好基礎。

1. 設定頁面的功能版塊規劃

利用 SwiftUI 的 List 與 Section 結構,我們可以非常快速地將設定選單進行分類:

  • 個人資料與偏好:包含使用者名稱、每日目標提醒時間切換。
  • 遊戲與音效設定:背景音樂、音效開關、遊戲難度偏好選擇。
  • 系統與帳號:隱私權政策、版本資訊以及登出功能。

2. 重要提醒:與後端 API 串接的邏輯留白

在寫設定頁面的程式碼時,有一個非常關鍵的開發觀念:部分設定項目暫時不要自己寫死或先接前端資料。

例如「修改個人資料」、「更新每日提醒時間」或「同步遊戲數據」等功能,未來都需要透過 Spring Boot 後端 API 來傳輸與儲存。因此在目前的階段:

  1. 畫面上的開關(Toggle)或文字欄位(TextField)只需先綁定前端的 @State 變數做畫面展示。
  2. 點擊「儲存」按鈕時,先寫好註解或預留空函式(如 func saveSettings()),不要貿然寫入未來的資料庫邏輯,避免後續要改寫 API 時產生衝突。

3. 用 AI 生成設定頁面元件

💡 實戰 Prompt 範例:

「請幫我用 SwiftUI 撰寫一個 App 的『設定頁面』。
需求規格:

  1. 使用 List 與 Section 進行分組(分為:個人偏好、系統設定、關於我們)。
  2. 包含背景音樂開關(Toggle)、通知提醒時間選擇(DatePicker)與版本號顯示。
  3. 請幫我預留一個『儲存設定』的按鈕,并在點擊事件中留白(加上 // TODO: 未來串接 Spring Boot API 註解)。
  4. 程式碼請保持乾淨,方便歸類在 MVC 架構的 View 資料夾中。」

利用 AI 產出頁面後,貼上 Xcode Preview 確認視覺排版,我們就順利完成了整個 App 的前端基礎畫面!


如果前幾天的任務都有順利完成,目前的 App 畫面可能會呈現如下圖所示(根據不同使用者需求與微調,畫面細節會有些微差異):
https://ithelp.ithome.com.tw/upload/images/20260920/20178746G0xVPgItvs.png

明天開始,我們將轉移陣地,準備進入後端與 AI 工作流的建置!


上一篇
Day 5 — 遊戲 UI 實戰:從遊戲規劃到 SwiftUI 畫面構建
下一篇
Day 7 — 後端開發起手式:別急著下 Prompt!Spring Boot 的 AI 協同地雷與架構規範
系列文
人機協同程式開發實戰:用 AI 輔助開發 Swift 與 Spring Boot,打造屬於自己的程式 共 17 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言